
<template>
  <div>
    <!-- 搜索 -->
    <el-form :model="formItem"  label-width="40px" :inline="true" class="demo-form-inline">
      <el-form-item label="账号">
        <el-input v-model="formItem.username" placeholder="管理员账号"></el-input>
      </el-form-item>
      <el-form-item label="姓名">
        <el-input v-model="formItem.name" placeholder="管理员名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="searchSubmit('formItem')">搜索</el-button>
      </el-form-item>
    </el-form>
    <div style="margin-bottom: 10px;">
      <el-button @click="$router.push({ name: 'admin_add' })" type="primary" size="mini">添加</el-button>
      <el-button @click.native="switchs(1)" type="info" size="mini">解冻</el-button>
      <el-button @click.native="switchs(2)" type="warning" size="mini">冻结</el-button>
    </div>
    <el-table ref="selection" :data="listData" border style="width: 100%"  @selection-change="select">
      <el-table-column fixed type="selection" width="55"></el-table-column>
      <el-table-column prop="avatar" label="头像">
        <!-- 图片的显示 -->
        <template  slot-scope="scope">
          <div class="demo-image__preview">
            <el-image v-if="scope.row.file" :src="scope.row.file.path" :preview-src-list="getImgList(scope.row)" style="width:50px;height:50px;borderRadius: 25px;"></el-image>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="username" label="账号"></el-table-column>
      <el-table-column prop="phone" label="手机"></el-table-column>
      <el-table-column prop="role_name" label="所属角色">
        <template slot-scope="scope">
          {{scope.row.user_role ? scope.row.user_role.role.name : ''}}
        </template>
      </el-table-column>
      <el-table-column label="状态">
        <template slot-scope="scope">
          <el-switch v-model="scope.row.status"
                     active-color="#00A854"
                     active-text="正常"
                     :active-value="1"
                     class="demo"
                     inactive-color="#F04134"
                     inactive-text="冻结"
                     :inactive-value="2"
                     @change="changeSwitch(scope.$index)">
          </el-switch>
        </template>
      </el-table-column>
      <el-table-column fixed="right" label="操作" width="260">
        <template slot-scope="scope">
          <el-button @click.native.prevent="edit(scope.$index)" type="primary" size="mini">编辑</el-button>
          <el-button @click.native.prevent="upPass(scope.$index)" type="primary" size="mini">修改密码</el-button>
          <el-button @click.native.prevent="del(scope.$index)" type="danger" size="mini">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div class="block" style="text-align : right; float : right; margin-top: 10px;">
      <!--<span class="demonstration">完整功能</span>-->
      <el-pagination
              @size-change="handlePageSize"
              @current-change="handlePage"
              :current-page="pageNum"
              :page-sizes="[10, 50, 100, 200]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="pageTotal">
      </el-pagination>
    </div>
    <!-- 修改密码弹窗-->
    <el-dialog :visible.sync="editPassword" title="修改密码">
      <el-form ref="formPass" :model="formPass" :rules="passwordValidate" label-width="80px" class="demo-ruleForm">
        <el-form-item label="新密码" prop="password">
          <el-input v-model="formPass.password" style="width:300px;" type="password" placeholder="请输入6-16位密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码" prop="password_confirmation">
          <el-input v-model="formPass.password_confirmation" style="width:300px;" type="password" placeholder="请输入6-16位密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click.native="passwordSubmit('formPass')">提交</el-button>
          <el-button @click="editPassword = false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import axios from "@/axios";
import {
  checkHttp,
  getHeaders,
  isIntNum,
  yzPwd,
  getmd5
} from "@/assets/js/common";
export default {
  data() {
    return {
      editPassword: false,
      formItem: {
        account: "",
        nickname: "",
      },
      formPass: {
        id: "",
        password: "",
        password_confirmation: ""
      },
      passwordValidate: {
        password: [
          {
            required: true,
            message: "新密码不能为空",
            trigger: "change"
          }
        ],
        password_confirmation: [
          {
            required: true,
            message: "确认密码不能为空",
            trigger: "change"
          }
        ]
      },
      ids: [],
      listData: [],
      pageTotal: 0,
      pageNum: 1,
      pageSize: 10
    };
  },

  mounted() {
    this.getAdmin();
  },
  methods: {
    //获取勾选参数
    select(val) {
      let vm = this;
      vm.ids = [];
      for (let i in val) {
        vm.ids.push(val[i].id);
      }
    },
    // 图片预览
    getImgList(row){
      let images = [];
      if (row.file) {
        images.push(row.file.path);
      }
      return images
    },
    //当前页数
    handlePage(value) {
      this.pageNum = value;
      this.getAdmin();
    },
    //每页显示条数
    handlePageSize(value) {
      this.pageSize = value;
      this.getAdmin();
    },
    //获取角色列表
    getAdmin() {
      let vm = this;
      axios
        .post("/admin/manage/get-lists", {
          page: this.pageNum,
          limit: this.pageSize,
          username: this.formItem.username,
          name: this.formItem.name
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            let result = data.data;
            vm.pageTotal = result.total;
            vm.listData = result.data;
          } else {
            vm.$message.info(data.message);
          }
        })
        .catch(error => {
          // vm.$Message.info("网络或服务器异常");
        });
    },
    //编辑角色
    edit(index) {
      // alert(this.listData[index].menu_id)
      this.$router.push({
        name: "admin_edit",
        params: { id: this.listData[index].id }
      });
    },
    //更改状态
    changeSwitch(index) {
      let vm = this;
      if (this.listData[index].status == 1) {
        status = 2;
      } else {
        status = 1;
      }
      axios
        .post("/admin/manage/updateStatus", {
          id: vm.listData[index].id,
          status: status
        })
        .then(response => {
          let status = response.status;
          let data = response.data;
          if (data.code == 200) {
            this.$message({
              message: '操作成功!',
              type: 'success',
              onClose: function(msg) {
                vm.getAdmin();
              }
            });
          } else {
            vm.$message.error(data.message);
          }
        })
        .catch(error => {
          // vm.$message.info("网络或服务器异常");
        });
    },
    //删除
    del: function (index = "") {
      let vm = this;
      //判断单条多条操作
      vm.ids = [];
      if (!isIntNum(index)) {
        vm.ids.push(vm.listData[index].id);
      } else {
        if (vm.ids.length < 1) {
          vm.$message.error("请勾选数据！");
          return false;
        }
      }
      this.$confirm("是否确认删除吗？", "确认删除" , {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
          .post("/admin/manage/delete", {
            ids: vm.ids
          })
          .then(response => {
            let status = response.status;
            let data = response.data;
            if (data.code == 200) {
              vm.$message({
                type: 'success',
                message: "操作成功!",
                onClose: function (msg) {
                  vm.getAdmin();
                  vm.ids = [];
                }
              });
            } else {
              vm.$message.error(data.message);
            }
          })
          .catch(error => {
            //vm.$Message.info("网络或服务器异常");
          });
      }).catch(() => {
        vm.ids = [];
        this.$refs.selection.selectAll(false);
      });
    },
    //修改密码
    passwordSubmit(name) {
      let vm = this;
      if (!yzPwd(vm.formPass.password_confirmation)) {
        vm.$message.error("请输入6-16位有字母、数组、字符组成的确认密码");
        return false;
      }
      if (vm.formPass.password_confirmation != vm.formPass.password) {
        vm.$message.error("确认密码和新密码不一致");
        return false;
      }
      this.$refs[name].validate(valid => {
        if (valid) {
          axios
            .post("/admin/manage/set_pass", {
              id: vm.formPass.id,
              password: getmd5(vm.formPass.password),
              password_confirmation: getmd5(vm.formPass.password_confirmation)
            })
            .then(response => {
              let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                vm.editPassword = false;
                vm.formPass.id = "";
                vm.formPass.password = "";
                vm.formPass.password_confirmation = "";
                vm.$message({
                  type: 'success',
                  message: "修改成功!",
                  onClose: function (msg) {
                    vm.getAdmin();
                  }
                });
              } else {
                vm.formPass.password = "";
                vm.formPass.password_confirmation = "";
                vm.$message.error(data.message);
              }
            })
            .catch(error => {
              // console.log(error);
              // vm.$message.error("网络或服务器异常");
            });
        } else {
          // vm.$message.error("Fail!");
        }
      });
    },
    cancel() {
      this.editPassword = false;
      this.formPass.id = "";
      this.formPass.password = "";
      this.formPass.password_confirmation = "";
    },
    upPass(index) {
      let vm = this;
      vm.editPassword = true;
      vm.formPass.id = vm.listData[index].id;
    },
    //搜索
    searchSubmit() {
      this.pageNum = 1;
      this.getAdmin();
    },
    //多选更改状态
    switchs(state) {
      let vm = this;
      if (vm.ids.length < 1) {
        vm.$message.error("请勾选数据！");
        return false;
      }
      this.$confirm("是否" + (state == 2 ? "确认禁用" : "确认解禁") + "吗？", state == 2 ? "确认禁用" : "确认解禁", {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        axios
            .post("/admin/manage/updateStatus", {
              id: vm.ids,
              status: state
            })
            .then(response => {
              let status = response.status;
              let data = response.data;
              if (data.code == 200) {
                vm.$message({
                  type: 'success',
                  message: "操作成功!",
                  onClose: function (msg) {
                    vm.getAdmin();
                    vm.ids = [];
                  }
                });
              } else {
                vm.$message.error(data.message);
              }
            })
            .catch(error => {
              // vm.$Message.info("网络或服务器异常");
            });
      }).catch(() => {
        vm.ids = [];
        this.$refs.selection.selectAll(false);
      });
    },
  }
};
</script>